import React, { Component } from 'react'
import Header from '../../components/Header/header';
import { Button, Form, Input, Toast } from "antd-mobile"
import axios from 'axios';

import orange_logo from "../../assets/img/pic_logo_orange.png"
import "./register.less"

import { reqregister } from '../../request/api';

export default class register extends Component {
  constructor() {
    super()
    this.state = {
      user: {
        phone: "",
        nickname: "",
        password: ""
      }
    }
  }
  render() {
    const { user } = this.state;
    return (
      <div className='firstbox'>
        <Header title="手机注册" back></Header>
        <div>{JSON.stringify(user)}</div>
        <img src={orange_logo} alt="" />
        <Form layout='horizontal'>
          <Form.Item label="手机号">
            <Input
              placeholder="请输入手机号"
              clearable
              onChange={(e) => this.setState({ user: { ...user, phone: e } })} />
          </Form.Item>

          <Form.Item label="昵称">
            <Input
              placeholder="请输入昵称"
              clearable
              onChange={(e) => this.setState({ user: { ...user, nickname: e } })}
            />
          </Form.Item>

          <Form.Item label="密码" name="password">
            <Input
              placeholder="请输入密码"
              clearable
              type="password"
              onChange={(e) => this.setState({ user: { ...user, password: e } })}
            />
          </Form.Item>

          <div className="text-center">
            <Button color="primary" onClick={this.register}>注册</Button>
          </div>
        </Form>
      </div>
    );
  };
  register = () => {
    reqregister(this.state.user).then(res => {
      if (res.data.code == 200) {
        Toast.show({
          content: res.data.msg
        })
        this.props.history.push("/login");
      } else {
        Toast.show({
          content: res.data.msg
        })
      }
    })
  }
}
